<template>
  <div id="pageArchive">
    <v-alert :value="articles.length===0" type="error" transition="scale-transition">暂无归档</v-alert>
    <v-card class="pa-3" v-if="articles.length>0">
      <v-timeline align-top dense>
        <v-timeline-item v-for="(list, i) in articles" color="blue" :key="i" small>
          <!-- <span slot="opposite" :class="`headline font-weight-bold blue--text`" v-text="year.year"></span> -->
          <div class="py-3">
            <h2 class="headline font-weight-light mb-3 blue--text" v-text="list.date"></h2>
            <span class="body-2 grey--text">共{{list.data.length}}篇</span>
            <div>
              <v-list dense>
                <template v-for="item in list.data">
                  <v-list-tile :key="item.id">
                    <v-list-tile-content>
                      <v-list-tile-title>{{ item.title}}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </template>
              </v-list>
            </div>
          </div>
        </v-timeline-item>
      </v-timeline>
      <div v-if="pagination.count > 0" class="text-xs-center">
        <v-pagination v-model="pagination.current_page" :length="pagination.total_pages"></v-pagination>
      </div>
    </v-card>
  </div>
</template>
<script>
import { getAllArchives } from '@/api/resource/archives'
export default {
  name: 'app-archive',
  data: () => ({
    pagination: {
      count: 0,
      current_page: 1,
      links: [],
      per_page: 15,
      total: 0,
      total_pages: 1
    },
    articles: []
  }),
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: 'init'
  },
  methods: {
    init () {
      let _this = this
      getAllArchives().then(res => {
        _this.artilces = res.data
        _this.pagination = res.meta.pagination
      })
    }
  },
  created () {
    this.init()
  }
}
</script>
